<template>
  <div class="news">
    <div class="banner">
      <img :src="ban1" alt="">
    </div>
    <div class="big-box">
      <router-link :to="{name:'newsDetail',query:{newid:item.id}}" class="list" v-for="item in newslist" :key="item.id">
        <div class="img">
          <img :src="comimgsrc+item.preview">
        </div>
        <div class="right">
          <div class="name">{{item.title}}</div>
          <p class="time">{{item.create_time}}</p>
          
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import ban1 from '@/assets/image/ban1.jpg';
export default {
  name: 'news',
  data(){
    return{
      ban1,
      comimgsrc:'http://api.mountainfreshes.com',
      newslist:[]
      
    }
  },
  methods:{
    gettxt:function(i){
      this.firstid = i;
        this.$http.get("/index.php/index/service/getInfo?ids="+i)
      .then(res => {
        this.nr = res.data
        console.log(res.data)
      })
      .catch(error => {
        
      });
    }
  },
  components:{
    
  },
  created(){
    this.$http.get("/index.php/index/article/getArticleList")
      .then(res => {
        console.log(res)
        this.newslist=res.data
        this.newslength = res.data.length
      })
      .catch(error => {
        
      });
  }
}
</script>

<style scoped lang="less">
.news{
  width: 100%;
  height: auto;
  zoom: 1;
  overflow: hidden;
  .banner{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    img{
      width: 100%;
    }
  }
  
}
.big-box{
  padding: .2rem;
  height: auto;
  zoom: 1;
  overflow: hidden;
  margin: auto;
  .list{
    width: 100%;
    height: 1.38rem;
    border-bottom: 1px dashed #d2d2d2;
    display: block;
    margin-bottom: .2rem;
    .img{
      float: left;
      width: 2rem;
      height: 1.2rem;
      img{
        display: block;
        width: 100%;
        height: 100%; 
      }
    }
    .right{
      width: 3.9rem;
      float: right;
      height: 1.2rem;
      .name{
        width: 100%;
        font-size: .24rem;
        height: .72rem;
        line-height: .36rem;
        color: #333333;
        text-align: left;
            overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
      }
      .time{
        margin-top: .2rem;
        font-size: .2rem;
        color: #808080;
        text-align: left;
      }
    }
  }
}
</style>
